import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="flex flex-col items-center justify-center space-y-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">英语在线练习系统</h1>
        <p className="max-w-[700px] text-lg text-muted-foreground">
          提高你的英语水平，通过练习掌握词汇、语法、阅读和写作技能
        </p>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <Card className="w-full">
            <CardHeader>
              <CardTitle>词汇与语法</CardTitle>
              <CardDescription>60道题目测试你的词汇和语法知识</CardDescription>
            </CardHeader>
            <CardContent>
              <p>包含比较级、最高级、情态动词等重要语法点</p>
            </CardContent>
            <CardFooter>
              <Link href="/practice/vocabulary-grammar" className="w-full">
                <Button className="w-full">开始练习</Button>
              </Link>
            </CardFooter>
          </Card>

          <Card className="w-full">
            <CardHeader>
              <CardTitle>情景对话与完形填空</CardTitle>
              <CardDescription>30道题目测试你的语言应用能力</CardDescription>
            </CardHeader>
            <CardContent>
              <p>包含日常对话、建议表达和上下文理解</p>
            </CardContent>
            <CardFooter>
              <Link href="/practice/dialogue-cloze" className="w-full">
                <Button className="w-full">开始练习</Button>
              </Link>
            </CardFooter>
          </Card>

          <Card className="w-full">
            <CardHeader>
              <CardTitle>阅读理解</CardTitle>
              <CardDescription>20道题目测试你的阅读能力</CardDescription>
            </CardHeader>
            <CardContent>
              <p>包含多种主题的短文阅读和理解问题</p>
            </CardContent>
            <CardFooter>
              <Link href="/practice/reading" className="w-full">
                <Button className="w-full">开始练习</Button>
              </Link>
            </CardFooter>
          </Card>

          <Card className="w-full">
            <CardHeader>
              <CardTitle>写作练习</CardTitle>
              <CardDescription>10道题目提高你的写作技能</CardDescription>
            </CardHeader>
            <CardContent>
              <p>包含建议信和议论文等常见写作类型</p>
            </CardContent>
            <CardFooter>
              <Link href="/practice/writing" className="w-full">
                <Button className="w-full">开始练习</Button>
              </Link>
            </CardFooter>
          </Card>

          <Card className="w-full">
            <CardHeader>
              <CardTitle>错题本</CardTitle>
              <CardDescription>查看和复习你的错题</CardDescription>
            </CardHeader>
            <CardContent>
              <p>系统自动记录你的错题，方便复习</p>
            </CardContent>
            <CardFooter>
              <Link href="/wrong-answers" className="w-full">
                <Button className="w-full">查看错题</Button>
              </Link>
            </CardFooter>
          </Card>

          <Card className="w-full">
            <CardHeader>
              <CardTitle>学习进度</CardTitle>
              <CardDescription>查看你的学习统计和进度</CardDescription>
            </CardHeader>
            <CardContent>
              <p>了解你的强项和需要提高的地方</p>
            </CardContent>
            <CardFooter>
              <Link href="/progress" className="w-full">
                <Button className="w-full">查看进度</Button>
              </Link>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  )
}

